<template>
  <div class="video-container">
    <!-- 返回按钮 -->
    <button v-if="isVideoPlaying" class="back-button" @click="goBack">返回</button>

    <!-- 图片预览部分 -->
    <div v-if="!isVideoPlaying" class="image-gallery">
      <div v-for="(video, index) in videos" :key="index" class="image-item" @click="playVideo(index)">
        <img v-lazy="video.img" alt="" class="video-thumbnail" />
        <p>{{ video.title }}</p>
      </div>
    </div>

    <!-- 视频播放器部分 -->
    <div v-if="isVideoPlaying" class="video-wrapper" @wheel.prevent="handleWheel" @mousedown="startDrag"
      @mousemove="onMouseMove" @mouseup="endDrag" @mouseleave="endDrag">
      <video ref="videoPlayer" controls>
        <source :src="currentVideo.url" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { throttle } from 'lodash';

export default defineComponent({
  name: "VideoPlayer",
  data() {
    return {
      isVideoPlaying: false,
      currentVideoIndex: 0,
      startY: 0,  // 鼠标按下时的Y坐标
      isDragging: false, // 是否正在拖动
      videos: [
        {
          url: "https://www.w3schools.com/html/movie.mp4",
          title: "嗨嗨嗨大狗熊",
          img: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.2msX3k799ygT0Q1CJrxL9AHaE7&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2'
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/c2/c2ff75e80fed428688684c305c6c2a6d.mp4?e=1733108700&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:d6gB8AWy7DOd08pe92apPwII_-A=",
          img:'https://ts1.cn.mm.bing.net/th?id=OIP-C.y7lIIfLnlIklZj61MWdfQAHaOu&w=175&h=350&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2',
          title: "美女美女"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/b7/b7eb8877687d404a89c63c60cacfad7a.mp4?e=1733108700&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:KP0WHVktgUkDy4bqX2eYW_zlywE=",
          img:'https://ts1.cn.mm.bing.net/th?id=OIP-C.y5rSMorsnRClq4Dh_4mgYgHaLH&w=204&h=306&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2',
          title: "咿呀咿呀呦"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/f0/f05b3d2c41614d9fbb6a500a9cd9bf87.mp4?e=1733108700&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:Vkb9GwKmOKxo3bKgPuT0fzD4GBk=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15874485074301248',
          title: "呀吼"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/3f/3f9730643bd34a13bb8552f7d253fd6f.mp4?e=1733108700&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:GZi7ZS5D2i9AFVrFvY_SD_yrBJQ=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15511064914989376',
          title: "哇哦"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/44/44124dc5800e4ccba4c40a1cfd6c195e.mp4?e=1733111640&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:1chYLdNkp_8upg8r66xB-v-JmCI=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15263593078754624',
          title: "甜甜甜甜甜"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/df/dfcc4865aaf3429ea228687e893d569a.mp4?e=1733111640&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:mn0Xf4G_qzd9tnwLyWjwCfUELg8=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15827531749232960',
          title: "哇哦~~~~~"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/87/87553c71b5d146ffaeedecd4439227c4.mp4?e=1733111640&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:wnxQ_a5VOpq5uulQiLQow9tolvk=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15862414312706368',
          title: "哦买噶~~~"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/e3/e3c2634abde04e1db1ba276dd88792d1.mp4?e=1733111640&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:LEvxhNrGn8mB1zS16IOCrcszJs8=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15862413442519360',
          title: "米米米米米~~~~"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/df/df46896081374adc98342c1e286617f3.mp4?e=1733111760&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:ScdRPpQl41lc1iRUDTrhQhCu8gQ=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15516435306418496',
          title: "哇哦，so sexy ! !"
        },
        {
          url: "https://fd.aigei.com/src/vdo/mp4/bc/bcf1e7b71ca4420e842abed8373ca18c.mp4?e=1733111760&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:2GV-quDPvUJJLS71DGKllvV6jbk=",
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15559723349152064',
          title: "my love !!!"
        },
      ],
    };
  },
  computed: {
    currentVideo() {
      return this.videos[this.currentVideoIndex];
    },
  },
  methods: {
    playVideo(index: number) {
      this.currentVideoIndex = index;
      this.isVideoPlaying = true;
      const videoPlayer = this.$refs.videoPlayer as HTMLVideoElement;
      if (videoPlayer) {
        const nextVideoIndex = (this.currentVideoIndex + 1) % this.videos.length;
        const nextVideoUrl = this.videos[nextVideoIndex].url;
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = nextVideoUrl;
        link.as = 'video';
        document.head.appendChild(link);
      }
    },
    goBack() {
      this.isVideoPlaying = false;
    },
    startDrag(event: MouseEvent) {
      this.isDragging = true;
      this.startY = event.clientY;
    },
    onMouseMove: throttle(function (event: MouseEvent) {
      if (this.isDragging) {
        const moveDistance = event.clientY - this.startY;

        // 如果滑动超过30px（或者设置更大的阈值），切换视频
        if (moveDistance > 30) {
          this.changeVideo(1);
          this.startY = event.clientY; // 更新起始位置
        } else if (moveDistance < -30) {
          this.changeVideo(-1);
          this.startY = event.clientY; // 更新起始位置
        }
      }
    }, 16),
    endDrag() {
      this.isDragging = false;
    },
    changeVideo(direction: number) {
      const newIndex = (this.currentVideoIndex + direction + this.videos.length) % this.videos.length;
      this.currentVideoIndex = newIndex;
      const videoPlayer = this.$refs.videoPlayer as HTMLVideoElement;
      if (videoPlayer) {
        videoPlayer.pause(); // 先暂停当前视频
        const newVideoUrl = this.currentVideo.url;
        const newVideoSource = document.createElement('source');
        newVideoSource.src = newVideoUrl;
        newVideoSource.type = 'video/mp4';
        videoPlayer.appendChild(newVideoSource);
        newVideoSource.addEventListener('loadstart', () => {
          // 当新视频开始加载时，移除旧的source元素
          const oldSources = videoPlayer.getElementsByTagName('source');
          for (let i = 0; i < oldSources.length; i++) {
            if (oldSources[i].src !== newVideoUrl) {
              videoPlayer.removeChild(oldSources[i]);
            }
          }
        });
      }
    },
  },
  mounted() {
    const videoPlayer = this.$refs.videoPlayer as HTMLVideoElement;
    if (videoPlayer) {
      const nextVideoIndex = (this.currentVideoIndex + 1) % this.videos.length;
      const nextVideoUrl = this.videos[nextVideoIndex].url;
      const link = document.createElement('link');
      link.rel = 'preload';
      link.href = nextVideoUrl;
      link.as = 'video';
      document.head.appendChild(link);
    }
  },
});
</script>

<style scoped>
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.image-item {
  /* background: rgb(243, 243, 243); */
  cursor: pointer;
  text-align: center;
  padding: .1rem;
  border-radius: .1rem;
}

.video-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: .1rem;
}

.video-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  transition: opacity 0.3s ease-in-out;
}

video {
  width: 100%;
  height: 100%;
}

.back-button {
  position: absolute;
  top: 2px;
  left: 13.9px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.2;
  color: white;
  border: none;
  border-radius: 5px;
  z-index: 10;
}
</style>
